.swiper-slide {
  &.swiper-slide-active {
    .cloud-back {
      -webkit-animation: cloud_back 45s linear infinite;
      animation: cloud_back 45s linear infinite;
    }
    .cloud-front {
      -webkit-animation: cloud_front 40s linear infinite;
      animation: cloud_front 40s linear infinite;
    }
  }
  .cloud-back {
    position: absolute;
    width: 640px;
    height: 516px;
    left: 50%;
    margin-left: -320px;
    top: 50%;
    margin-top: -63px;
    z-index: 9;
    background: url("../img/slide/p1/cloud@567x516.png") no-repeat center 0;
  }
  .cloud-front {
    position: absolute;
    width: 640px;
    height: 229px;
    left: 50%;
    margin-left: -320px;
    top: 50%;
    margin-top: 220px;
    z-index: 90;
    background: url("../img/slide/p1/cloud_front@640x229.png") no-repeat center 0;
  }
}
.p1 {
  &.swiper-slide-active {
    .icon-loading, .loading-num {
      -webkit-animation: w 0.5s;
      -webkit-animation-delay: 0s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-fill-mode: backwards;
    }
    .hot {
      -webkit-animation: hot 2s linear infinite;
      animation: hot 2s linear infinite;
    }
    .box {
      -webkit-animation: box 0.5s;
      -webkit-animation-delay: 1.5s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-fill-mode: backwards;
    }
    .w-1, .w-2, .w-3, .w-4 {
      //-webkit-animation: w 2.1s;
      //-webkit-animation-delay: 2s;
      //-webkit-animation-timing-function: linear;
      //-webkit-animation-fill-mode: backwards;
      z-index: 12;
      .w-1-1 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 2s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-1-2 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 2.3s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-1-3 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 2.6s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-1-4 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 2.9s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-1-5 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 3.2s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-1-6 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 3.5s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-1-7 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 3.8s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
    }
    .w-2 {
      -webkit-animation-delay: 4.1s;
      .w-2-1 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 4.1s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-2-2 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 4.4s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-2-3 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 4.7s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-2-4 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 5s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-2-5 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 5.3s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-2-6 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 5.6s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-2-7 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 5.9s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
    }
    .w-3 {
      -webkit-animation-delay: 6.2s;
      .w-3-1 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 6.2s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-3-2 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 6.5s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-3-3 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 6.8s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-3-4 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 7.1s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-3-5 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 7.4s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-3-6 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 7.7s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-3-7 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 8s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
    }
    .w-4 {
      -webkit-animation-delay: 8.3s;
      .w-4-1 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 8.3s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-4-2 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 8.6s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-4-3 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 8.9s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-4-4 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 9.2s;
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-fill-mode: backwards;
      }
      .w-4-5 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 9.8s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: backwards;
      }
      .w-4-6 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 9.8s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: backwards;
      }
      .w-4-7 {
        -webkit-animation: w 0.3s;
        -webkit-animation-delay: 9.8s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: backwards;
      }
    }
  }
  .icon-loading {
    position: absolute;
    width: 155px;
    height: 141px;
    left: 50%;
    margin-left: -97px;
    bottom: 50%;
    margin-bottom: -306px;
    z-index: 15;
    .hot {
      width: 155px;
      height: 66px;
      background: url("../img/slide/p1/loading_hot@61x66.png") no-repeat center 0;
    }
    .cannikin {
      width: 155px;
      height: 70px;
      background: url("../img/slide/p1/loading_cannikin@155x70.png") no-repeat center 0;
    }
  }
  .loading-num {
    position: absolute;
    width: 155px;
    height: 70px;
    left: 50%;
    margin-left: -97px;
    bottom: 50%;
    margin-bottom: -376px;
    z-index: 15;
    .num {
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #333333;
      font-size: 24px;
    }
    .tit {
      font-size: 14px;
      color: #950000;
      text-align: center;
      line-height: 20px;
    }
  }
  .box {
    position: absolute;
    width: 406px;
    height: 846px;
    left: 50%;
    margin-left: -231px;
    //bottom: 83px;
    bottom: 50%;
    margin-bottom: -423px;
    background: url("../img/slide/p1/box@406x846.png") no-repeat 0 0;
    z-index: 11;
  }
  .w-1 {
    position: absolute;
    width: 66px;
    left: 50%;
    margin-left: 67px;
    bottom: 50%;
    margin-bottom: 97px;
    .w-1-1 {
      width: 53px;
      height: 61px;
      background: url("../img/slide/p1/w_1_1@53x61.png") no-repeat center 0;
    }
    .w-1-2 {
      width: 57px;
      height: 51px;
      background: url("../img/slide/p1/w_1_2@57x51.png") no-repeat center 0;
    }
    .w-1-3 {
      width: 50px;
      height: 49px;
      background: url("../img/slide/p1/w_1_3@50x49.png") no-repeat center 0;
    }
    .w-1-4 {
      width: 55px;
      height: 58px;
      background: url("../img/slide/p1/w_1_4@55x58.png") no-repeat center 0;
    }
    .w-1-5 {
      width: 53px;
      height: 42px;
      background: url("../img/slide/p1/w_1_5@53x42.png") no-repeat center 0;
    }
    .w-1-6 {
      width: 34px;
      height: 37px;
      background: url("../img/slide/p1/w_1_6@34x37.png") no-repeat center 0;
    }
    .w-1-7 {
      width: 62px;
      height: 59px;
      background: url("../img/slide/p1/w_1_7@62x59.png") no-repeat center 0;
    }
  }
  .w-2 {
    position: absolute;
    width: 66px;
    left: 50%;
    margin-left: -13px;
    bottom: 50%;
    margin-bottom: 33px;
    .w-2-1 {
      width: 41px;
      height: 44px;
      background: url("../img/slide/p1/w_2_1@41x44.png") no-repeat center 0;
    }
    .w-2-2 {
      width: 55px;
      height: 49px;
      background: url("../img/slide/p1/w_2_2@55x49.png") no-repeat center 0;
    }
    .w-2-3 {
      width: 55px;
      height: 61px;
      background: url("../img/slide/p1/w_2_3@55x61.png") no-repeat center 0;
    }
    .w-2-4 {
      width: 48px;
      height: 55px;
      background: url("../img/slide/p1/w_2_4@48x55.png") no-repeat center 0;
    }
    .w-2-5 {
      width: 47px;
      height: 36px;
      background: url("../img/slide/p1/w_2_5@47x36.png") no-repeat center 0;
    }
    .w-2-6 {
      width: 47px;
      height: 41px;
      background: url("../img/slide/p1/w_2_6@47x41.png") no-repeat center 0;
    }
    .w-2-7 {
      width: 54px;
      height: 66px;
      background: url("../img/slide/p1/w_2_7@54x66.png") no-repeat center 0;
    }
  }
  .w-3 {
    position: absolute;
    width: 67px;
    left: 50%;
    margin-left: -89px;
    bottom: 50%;
    margin-bottom: 66px;
    .w-3-1 {
      width: 58px;
      height: 56px;
      background: url("../img/slide/p1/w_3_1@58x56.png") no-repeat center 0;
    }
    .w-3-2 {
      width: 49px;
      height: 65px;
      background: url("../img/slide/p1/w_3_2@49x65.png") no-repeat center 0;
    }
    .w-3-3 {
      width: 55px;
      height: 59px;
      background: url("../img/slide/p1/w_3_3@55x59.png") no-repeat center 0;
    }
    .w-3-4 {
      width: 61px;
      height: 51px;
      background: url("../img/slide/p1/w_3_4@61x51.png") no-repeat center 0;
    }
    .w-3-5 {
      width: 37px;
      height: 38px;
      background: url("../img/slide/p1/w_3_5@37x38.png") no-repeat center 0;
    }
    .w-3-6 {
      width: 41px;
      height: 47px;
      background: url("../img/slide/p1/w_3_6@41x47.png") no-repeat center 0;
    }
    .w-3-7 {
      width: 60px;
      height: 43px;
      background: url("../img/slide/p1/w_3_7@60x43.png") no-repeat center 0;
    }
  }

  .w-4 {
    position: absolute;
    width: 91px;
    left: 50%;
    margin-left: -190px;
    bottom: 50%;
    margin-bottom: -54px;
    .w-4-1 {
      width: 91px;
      height: 47px;
      background: url("../img/slide/p1/w_4_1@42x47.png") no-repeat center 0;
    }
    .w-4-2 {
      width: 91px;
      height: 45px;
      background: url("../img/slide/p1/w_4_2@50x45.png") no-repeat center 0;
    }
    .w-4-3 {
      width: 91px;
      height: 34px;
      background: url("../img/slide/p1/w_4_3@37x34.png") no-repeat center 0;
    }
    .w-4-4 {
      width: 91px;
      height: 53px;
      background: url("../img/slide/p1/w_4_4@62x53.png") no-repeat center 0;
    }
    .w-4-5 {
      width: 91px;
      height: 27px;
      background: url("../img/slide/p1/w_4_5@53x27.png") no-repeat left 0;
    }
    .w-4-6 {
      width: 91px;
      height: 100px;
      background: url("../img/slide/p1/w_4_6@81x100.png") no-repeat left 0;
    }
    .w-4-7 {
      width: 74px;
      height: 91px;
      background: url("../img/slide/p1/w_4_7@74x81.png") no-repeat left 0;
    }

  }

}